<template>
	<view class="bg">
		<view class="container">
			<div class="points">
				<div class="text">我的积分</div>
				<div class="num">{{ assets.credit }}</div>
			</div>
			<div class="nav">
				<div class="item" @click="handleToSubNav('/pagesA/record/index')">
					<image class="icon" src="@/static/shop/icon1@2x.png" mode="aspectFit"></image>
					<div class="text">积分明细</div>
				</div>
				<div class="link"></div>
				<div class="item" @click="handleToSubNav('/pagesA/exchange/index')">
					<image class="icon" src="@/static/shop/icon2@2x.png" mode="aspectFit"></image>
					<uni-badge v-if="assets.preExchangeNum > 0" absolute="rightTop" :text="assets.preExchangeNum"
						:offset="[-4, -2]">
						<div>兑换记录</div>
					</uni-badge>
					<div v-else class="text">兑换记录</div>
				</div>
			</div>

			<div class="context">
				<div class="column" :class="{ 'is-show': isShowColumn }">
					<div class="column-item">
						<div class="column-item__type" :class="{ active: categoryId === 0 }"
							@click="handleChooseCat(0)">全部</div>
						<div class="column-item__type" :class="{ active: item.id === categoryId }"
							@click="handleChooseCat(item.id)" v-for="(item, index) in catList" :key="index">
							{{ item.categoryName }}
						</div>
					</div>
					<div class="column-btn" :class="{ 'is-show': isShowColumn }">
						<div class="column-btn--action" @click="isShowColumn = !isShowColumn">
							<div class="text">{{ isShowColumn ? '收起' : '展开' }}</div>
							<uni-icons class="icon" :type="isShowColumn ? 'top' : 'bottom'" color="#111111"></uni-icons>
						</div>
					</div>
				</div>

				<div class="list">
					<template v-if="productList.length > 0">
						<div class="list-item" v-for="(item, index) in productList" :key="index"
							@click="handleToNav(item.id)">
							<image class="thumb" :src="item.coverUrl" mode="aspectFit"></image>
							<view class="list-title">
								<div class="title">{{ item.productName }}</div>
								<div class="stock">库存:{{ item.stock }}</div>
							</view>
							<div class="bottom">
								<div class="text">
									<text class="num">{{ item.price }}</text>
									积分
								</div>
								<div v-if="item.stock > 0" class="btn"
									@click.stop="handleCreditOrder(item.price, item.id)">立即兑换</div>
								<div v-else class="btn no">立即兑换</div>
							</div>
						</div>
					</template>
					<template v-else>
						<div v-if="!isloading" class="no-data"
							style="display: flex;justify-content: center;align-items: center;flex-direction: column;padding-top: 180rpx;padding-bottom: 180rpx;margin: 0 auto;">
							<image style="width: 444rpx;height: 288rpx;" src="@/static/images/mine/no-data@2x.png"
								mode="aspectFit"></image>
							<div style="font-size: 36rpx;color: #999;padding-top: 60rpx;" class="text">暂无数据</div>
						</div>
					</template>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		memberAsset
	} from '@/api/member.js';
	import {
		productCategorySearchList,
		searchCreditProductList,
		creditOrderCreate
	} from '@/api/shop.js';

	export default {
		data() {
			return {
				preExchangeNum: 10,
				assets: {
					preExchangeNum: ''
				},
				isShowColumn: false,
				categoryId: 0,
				catList: [],
				productList: [],
				isloading: false,
				total: 0,
				pages: {
					start: 1,
					limits: 10
				}
			};
		},
		onShow() {
			this.productList = [];
			this.isloading = false;
			this.pages = {
				start: 1,
				limits: 10
			};
			this.getMemberAsset();
			this.getProductCategorySearchList();
			this.getSearchCreditProductList();
		},
		onReachBottom() {
			if (this.pages.start * this.pages.limits >= this.total) return this.$modal.msg('数据加载完毕!');

			if (this.isloading) return;

			// 让页码值自增+1
			this.pages.start++;
			this.getSearchCreditProductList();
		},
		methods: {
			getMemberAsset() {
				memberAsset().then(res => {
					this.assets = res.data;
				});
			},
			// 商品分类列表
			getProductCategorySearchList() {
				const data = {
					module: 2
				};
				productCategorySearchList(data).then(res => {
					this.catList = res.rows;
				});
			},
			// 商品列表
			getSearchCreditProductList() {
				this.isloading = true;
				const data = {
					categoryId: this.categoryId,
					...this.pages
				};
				searchCreditProductList(data).then(res => {
					this.total = res.total;
					this.productList = res.rows ? this.productList.concat(res.rows) : [];
					this.isloading = false;
				});
			},
			// 根据分类筛选商品
			handleChooseCat(id) {
				this.productList = [];
				this.pages = {
					start: 1,
					limits: 10
				};

				this.categoryId = id;
				this.getSearchCreditProductList();
			},
			// 进入详情页
			handleToNav(id) {
				this.$tab.navigateTo(`/pagesA/shop/detail?id=${id}`);
			},
			// 进入子页
			handleToSubNav(pagesA) {
				this.$tab.navigateTo(pagesA);
			},
			// 兑换商品
			handleCreditOrder(num, id) {
				uni.showModal({
					title: '兑换商品',
					content: `确定消费${num}积分兑换此商品`,
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					cancelColor: '#000000',
					confirmColor: '#1E60FF',
					success: res => {
						if (res.confirm) {
							console.log('用户点击确认');
							this.fetchCreditOrderCreate(id);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					fail: () => {
						uni.showToast({
							title: '兑换失败',
							icon: 'none'
						});
					}
				});
			},
			fetchCreditOrderCreate(id) {
				const data = {
					productId: id
				};
				creditOrderCreate(data).then(res => {
					uni.showToast({
						title: '兑换成功',
						icon: 'success',
						mask: true
					});
					setTimeout(() => {
						this.$tab.navigateTo('/pagesA/exchange/index');
					}, 1000);
				});
			}
		}
	};
</script>

<style lang="scss">
	.bg {
		min-height: 100vh;
		background: #fff;
	}

	.container {
		padding: 24rpx 0;
		padding-top: 4px;
		line-height: inherit;
		background: linear-gradient(180deg, #1e60ff 0%, rgba(30, 96, 255, 0) 100%);
		background-size: 100% 416rpx;
		background-repeat: no-repeat;
		width: 100%;
		background-attachment: fixed;

		.points {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;

			.text {
				margin-bottom: 4rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}

			.num {
				font-size: 80rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #ffffff;
			}
		}

		.nav {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 702rpx;
			padding: 28rpx;
			margin: 0 auto;
			background: #ffffff;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(238, 238, 238, 0.5);
			border-radius: 24rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 64rpx;
					height: 64rpx;
				}

				.text {
					margin-left: 16rpx;
					font-size: 32rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #111111;
				}
			}

			.link {
				margin: 0 70rpx;
				width: 2rpx;
				height: 48rpx;
				background: #cccccc;
			}
		}

		.context {
			position: relative;
			margin-top: 24rpx;
			background: #ffffff;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(238, 238, 238, 0.5);
			border-radius: 24rpx;
			overflow: hidden;
		}

		.column {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: 100%;
			display: flex;
			height: 96rpx;
			background: #e5edff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			box-sizing: border-box;
			overflow: hidden;
			transition: 0.7s;
			z-index: 9;

			&.is-show {
				height: auto;
				background: rgba(229, 237, 255, 0.7);
				// transition: height ease 0.7s;
			}

			&-item {
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				align-content: flex-start;
				flex-wrap: wrap;
				padding: 24rpx;
				padding-bottom: 0;
				width: 100%;
				box-sizing: border-box;

				&__type {
					height: 48rpx;
					line-height: 48rpx;
					margin-right: 16rpx;
					padding: 0 32rpx;
					margin-bottom: 24rpx;
					background: #ffffff;
					border-radius: 28rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

					&.active {
						font-weight: 600;
						color: #ffffff;
						background: #1e60ff;
					}
				}
			}

			&-btn {
				position: absolute;
				top: 0;
				right: 0;
				min-width: 80rpx;
				width: 80rpx;
				height: 100%;
				background: #e5edff;
				box-shadow: -2rpx 0rpx 4rpx 0rpx rgba(169, 185, 221, 0.3);
				border-radius: 0rpx 24rpx 0rpx 0rpx;
				z-index: 9;
				transition: height ease 0.7s;

				&.is-show {
					background: rgba(229, 237, 255, 0.5);
					// transition: height ease 0.7s;
				}

				&--action {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 100%;

					.text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
					}

					.icon {
						font-weight: 600;
					}
				}
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			padding: 96rpx 24rpx 24rpx;

			&-item {
				position: relative;
				margin-top: 24rpx;
				margin-right: 26rpx;
				width: 338rpx;
				padding-bottom: 24rpx;
				height: auto;
				background: #f2f6ff;
				border-radius: 16rpx;
				border: 3rpx solid rgba(30, 98, 255, 0.7);
				overflow: hidden;

				&:nth-child(2n) {
					margin-right: 0;
				}

				.thumb {
					width: 338rpx;
					height: 338rpx;
					background-color: #fff;
				}

				.list-title {
					display: flex;
					justify-content: space-between;

					.title {
						margin: 14rpx;
						margin-right: 4px;
						font-size: 28rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #111111;
						height: 75rpx;
						overflow: hidden;
						-webkit-line-clamp: 2;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}

					.stock {
						position: absolute;
						top: 291rpx;
						right: 0;
						text-align: center;
						margin-top: 0;
						margin-right: 0;
						text-align: right;
						min-width: 106rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #fff;
						background-color: rgba(43, 48, 57, 0.5);
						padding: 7rpx 10rpx;
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.text {
						margin-left: 16rpx;
						font-size: 28rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #1e60ff;

						.num {
							font-size: 41rpx;
						}
					}

					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 136rpx;
						height: 48rpx;
						font-size: 24rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #ffffff;
						background: linear-gradient(90deg, #00e4ff 0%, #1e60ff 100%);
						box-shadow: inset 0rpx 4rpx 12rpx 0rpx #c0fbff, inset -4rpx -4rpx 16rpx 0rpx rgba(28, 106, 255, 0.5);
						border-radius: 28rpx 0rpx 0rpx 28rpx;

						&.no {
							background: linear-gradient(90deg, #cfcfcf 0%, #cfcfcf 100%);
							box-shadow: inset 0rpx 4rpx 12rpx 0rpx #cfcfcf, inset -4rpx -4rpx 16rpx 0rpx rgba(184, 184, 184, 0.5);
						}
					}
				}
			}
		}
	}
</style>
